<template>
  <el-container>
    <el-main>
      <el-card>
        <div slot="header">
          <h1>About me</h1>
        </div>
        <div class="user-profile">
          <div class="box-center">
            <pan-thumb :image="user.headUrl" :height="'100px'" :width="'100px'" :hoverable="false">
              <div>Hello</div>
              {{ user.userName }}
            </pan-thumb>
          </div>
          <div class="box-center">
            <div class="user-name text-center">{{ user.nikeName }}</div>
            <div class="user-role text-center text-muted">
              <span v-for="item in user.authorityList" :key="item.authority">
                【{{ item.authority }}】
              </span>
            </div>
          </div>
        </div>
        <div>
          <el-button type="text" size="mini" @click="toUpdate">修改信息</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" size="mini" @click="toUpdatePassword">修改密码</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" size="mini" @click="toBindWechat">绑定微信</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" size="mini" @click="toBindMail">绑定邮箱</el-button>
        </div>
        <el-dialog
            title="修改信息"
            :visible.sync="dialogVisible"
            width="30%"
            :append-to-body="true"
            :before-close="handleClose">
          <el-form ref="updateUserInfoForm" :model="updateUserInfoForm" label-width="auto" size="small" label-position="right" :rules="rules">
            <el-form-item prop="userName" label="用户名：">
              <el-input v-model="updateUserInfoForm.userName" placeholder="请输入用户名" clearable></el-input>
            </el-form-item>
            <el-form-item prop="userName" label="昵称：">
              <el-input v-model="updateUserInfoForm.nikeName" placeholder="请输入昵称" clearable></el-input>
            </el-form-item>
            <el-form-item prop="headeUrl" label="头像url：">
              <el-input v-model="updateUserInfoForm.headUrl" placeholder="请再次输入密码" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateUserInfo">确定</el-button>
              <el-button type="info" @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog title="绑定微信"
                   :visible.sync="wechatDialogVisible"
                   width="30%"
                   :append-to-body="true">
          <WxLogin appid="wxab7ebd7266a0b3fa" scope="snsapi_login" theme="black" :redirect_uri="wechatRedirectUrl" href="data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsKLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDgwJTsgbWFyZ2luOiAwIGF1dG87IHBhZGRpbmc6IDAgMDt9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQouaW1wb3dlckJveCAuc3RhdHVzIHtkaXNwbGF5OiBub25lO30="></WxLogin>
        </el-dialog>
        <el-dialog title="修改密码"
                   :visible.sync="passwordDialogVisible"
                   width="30%"
                   :append-to-body="true">
          <el-form ref="updatePasswordForm" :model="updatePasswordForm" label-width="auto" size="small" label-position="right" :rules="passwordRule">
            <el-form-item prop="oldPassword" label="原密码：">
              <el-input v-model="updatePasswordForm.oldPassword" placeholder="请输入原密码" clearable></el-input>
            </el-form-item>
            <el-form-item prop="newPassword" label="新密码：">
              <el-input v-model="updatePasswordForm.newPassword" placeholder="请输入新密码" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updatePassword" :loading="updatePasswordButtonLoading">确定</el-button>
              <el-button type="info" @click="passwordDialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <div class="user-bio">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>操作日志</span></div>
            <div class="user-bio-section-body">
              <div class="text-muted">
                <p v-for="item in list" :key="item">{{ item }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import WxLogin from 'vue-wxlogin'
import PanThumb from '@/components/application/component/userinfo/index'
import {getUserInfo, updatePassword, updateUserInfo} from "@/api/User";

export default {
  name: "UserInfo",
  components: { PanThumb, WxLogin },
  data(){
    return{
      user: {},
      dialogVisible: false,
      wechatDialogVisible: false,
      passwordDialogVisible: false,
      rules: {},
      passwordRule: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ]
      },
      updatePasswordForm: {},
      updateUserInfoForm: {},
      list: [],

      wechatRedirectUrl: 'http://jxtz.net/local_wechat_register?id=' + JSON.parse(sessionStorage.getItem('userInfo')).id,

      updatePasswordButtonLoading: false
    }
  },

  filters: {
    rolesFilter(val){
      for (let i = 0; i < val.length; i++) {
        return val[0].authority;
      }
    }
  },

  created() {

    this.init()
    this.list = [
        '以下是模拟数据：',
        '2021-05-25: JS in Computer Science from the University of Technology',
        '2021-05-25: 修改个人信息',
        '2021-05-25: 新增xxx'
    ]
  },

  methods: {

    toUpdatePassword(){
      this.passwordDialogVisible = true
    },

    updatePassword(){
      this.updatePasswordButtonLoading = true
      const updatePasswordForm = this.updatePasswordForm;
      updatePasswordForm.id = JSON.parse(sessionStorage.getItem('userInfo')).id
      updatePasswordForm.userName = JSON.parse(sessionStorage.getItem('userInfo')).userName
      updatePassword(updatePasswordForm).then(res => {
        this.passwordDialogVisible = false
        this.$notify.success(res.data.message)
        this.updatePasswordForm = {}
        this.updatePasswordButtonLoading = false
      })
    },

    updateUserInfo(){
      const updateUserInfoForm = this.updateUserInfoForm;
      updateUserInfo(updateUserInfoForm).then(res => {
        let user = JSON.parse(sessionStorage.getItem('userInfo'));
        user.userName = updateUserInfoForm.userName
        user.nikeName = updateUserInfoForm.nikeName
        user.headUrl = updateUserInfoForm.headUrl
        sessionStorage.setItem('userInfo', JSON.stringify(user))
        this.user = user;
        this.$notify.success(res.data.message)
        this.dialogVisible = false
      })
    },

    toBindWechat(){
      this.wechatDialogVisible = true
    },

    toBindMail(){
      this.$notify.info('尽情期待');
    },

    init(){
      this.getUserInfo()
    },

    getUserInfo(){
      this.user = JSON.parse(sessionStorage.getItem('userInfo'))
    },

    toUpdate(){
      this.dialogVisible = true
      this.updateUserInfoForm = this.user
    },

    handleClose(){
      this.userForm = {}
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
  //text-align: left;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>